<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图形混合</title>
	</head>
	<body>
		<canvas id="canvas" width="800" height="800"></canvas>
		<script>
			var canvas = document.getElementById('canvas');
			var c = canvas.getContext('2d');
			
			c.fillStyle = 'hotpink'
			c.fillRect(0,0,200,200)
			
			// source-over默认，源图像叠加在目标图像
		    // source-atop在图像顶部显示,超出部分不显示
			// source-in显示两个图像叠加部分
			// source-out显示目标图像之外源图像
			// 根以上对应相反destination-over、destination-atop、destination-in、destination-out
			// lighter显示目标图像+源图像，叠加区域为组合色
			// copy只显示源图像
			// xor将目标图像和原图像组合,叠加区域显示透明色
			c.globalCompositeOperation = 'xor'
			
			c.fillStyle = 'deepskyblue'
			c.fillRect(100,100,200,200)
		</script>
	</body>
</html>
